<template>
    <!-- 头条快报 -->
    <view class="diy-special dis-flex flex-y-center">
        <!-- 图片 -->
        <form @submit="_onTargetIndex" :report-submit="true">
            <button formType="submit" class="btn-normal dis-flex">
                <view class="special-left">
                    <image class="image" mode="widthFix" :src="itemStyle.image"></image>
                </view>
            </button>
        </form>
        <!-- 资讯轮播 -->
        <swiper
            :class="'special-content flex-box display_' + itemStyle.display"
            :autoplay="true"
            :interval="2200"
            duration="800"
            :circular="true"
            :vertical="true"
            :display-multiple-items="itemStyle.display"
        >
            <swiper-item v-for="(item, index) in dataList" :key="index">
                <form @submit="_onTargetDetail" :report-submit="true">
                    <button formType="submit" class="btn-normal dis-flex" :data-id="item.article_id">
                        <view class="content-item onelist-hidden">
                            <text>{{ item.article_title }}</text>
                        </view>
                    </button>
                </form>
            </swiper-item>
        </swiper>
        <!-- 更多资讯 -->
        <form @submit="_onTargetIndex" :report-submit="true">
            <button formType="submit" class="btn-normal dis-flex">
                <view class="special-more">
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </view>
            </button>
        </form>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {};
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Array
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转文章首页
         */
        _onTargetIndex(e) {
            // 记录formid
            app.globalData.saveFormId(e.detail.formId);
            uni.navigateTo({
                url: '/pages/article/index'
            });
        },

        /**
         * 跳转文章详情页
         */
        _onTargetDetail(e) {
            // 记录formid
            app.globalData.saveFormId(e.detail.formId);
            uni.navigateTo({
                url: '/pages/article/detail/index?article_id=' + e.detail.target.dataset.id
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
